<template>
    <div>
      <el-button type="primary" @click="addmodel()">添加视频模板</el-button>
  
      <el-dialog width="800px" title="模板上传:" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="模板名称:" :label-width="formLabelWidth">
            <el-input v-model="form.tem_name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="模板ID:" :label-width="formLabelWidth">
            <el-input v-model="form.tem_ids" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="模板分类" prop="video_name" :label-width="formLabelWidth">
            <el-select v-model="form.group_id" placeholder="请选择">
              <el-option v-for="item in postDataa" :key="item.value" :label="item.group_name" :value="item.group_id">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="模板类型:" :label-width="formLabelWidth">
            <el-radio-group v-model="template_type">npm
              <!-- <el-radio :label="1">普通模板</el-radio> -->
              <el-radio :label="2">高级模板</el-radio>
              <el-radio :label="3">音频模板</el-radio>
            </el-radio-group>
          </el-form-item>
  
          <el-form-item label="模板视频:" :label-width="formLabelWidth">
            <el-upload class="avatar-uploader" multiple ref="upload" action="string" :accept="accept"
              :before-upload="onBeforeUploadImage" :http-request="UploadImage1" :show-file-list="false"
              :on-change="fileChange">
              <el-button size="small" icon="el-icon-upload" type="primary">点击上传
              </el-button>
            </el-upload>
  
            <video v-if="form.tem_video != ''" :src="form.tem_video" class="video-avatar" controls="controls"
              autoplay="autoplay">
              您的浏览器不支持视频播放
            </video>
          </el-form-item>
  
          <el-form-item label="视频地址:" :label-width="formLabelWidth">
            <el-input v-model="form.tem_video" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="模板参数:" height="300" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.tem_parame" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensure_one()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog width="800px" title="修改模板:" :visible.sync="changeVisible">
        <el-form :model="form">
          <el-form-item label="模板名称:" :label-width="formLabelWidth">
            <el-input v-model="form.tem_name" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="模板ID:" :label-width="formLabelWidth">
            <el-input v-model="form.tem_ids" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="模板分类" prop="video_name" class="el-form-item__labell">
            <el-select v-model="form.group_id" placeholder="请选择">
              <el-option v-for="item in postDataa" :key="item.value" :label="item.group_name" :value="item.group_id">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="模板视频:">
            <el-upload class="avatar-uploader" multiple ref="upload" action="string" :accept="accept"
              :before-upload="onBeforeUploadImage" :http-request="UploadImage1" :show-file-list="false"
              :on-change="fileChange">
              <el-button size="small" icon="el-icon-upload" type="primary">点击上传
              </el-button>
            </el-upload>
            <video v-if="form.tem_video != ''" :src="form.tem_video" class="video-avatar" controls="controls"
              autoplay="autoplay">
              您的浏览器不支持视频播放
            </video>
          </el-form-item>
  
          <el-form-item label="模板参数：" :label-width="formLabelWidth">
            <el-input height="300" type="textarea" v-model="form.tem_parame" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensure_tow()">确 定</el-button>
        </div>
      </el-dialog>
      <el-table :data="listData" style="width: 100%">
        <el-table-column prop="tem_name" label="模板名称"></el-table-column>
        <el-table-column prop="tem_video" label="预览视频">
          <template slot-scope="scope">
            <video :src="scope.row.tem_video" controls="controls" :autoplay="false" style="
                    width: 100%;
                    height: 200px;
                    outline: none;
                    margin-right: 100px;
                  "></video>
          </template>
        </el-table-column>
  
        <el-table-column prop="tem_ids" label="模板ID"></el-table-column>
        <el-table-column prop="create_datetime" label="创建时间">
        </el-table-column>
        <el-table-column prop="update_datetime" label="修改时间">
        </el-table-column>
  
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="abandon(scope.row)">修改
            </el-button>
            <el-popconfirm @confirm="cancel(scope.row)" title="这是一段内容确定删除吗？">
              <!-- <el-button slot="reference">删除</el-button> -->
              <el-button type="danger" size="mini" slot="reference">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listpage.page"
        :page-sizes="[10, 20, 30, 40]" :page-size="listpage.list_rows" layout="total, sizes, prev, pager, next, jumper"
        :total="total" />
    </div>
  </template>
  
  <script>
  // import request from "@/utils/request";
  // import FileApi from "../../api/file";
  import {useModal, usePagination} from '@/sheep/hooks';
  import edit from "./edit.vue";
  export default {
   components:{
    edit
   },
    data() {
      return {
        template_type: 1,
        postDataa: [],
        listData: [],
        dialogImageUrl: "",
        dialogVisible: false,
        dialogFormVisible: false,
        changeVisible: false,
        add: false,
        change: false,
        accept: "",
        formdata: {
          video_name: "",
        },
        this_config: {
          /*上传个数*/
          total: 1,
          file_type: "image",
        },
        total: 0,
        listpage: {
          page: 1,
          list_rows: 10,
          videoName: "",
          actionName: "",
          start: "",
          end: "",
        },
        fileList: [],
        form: {
          tem_name: "",
          tem_video: "",
          tem_ids: "",
          tem_parame: "",
          app_id: "10001",
          temid: "",
          group_id: "",
        },
        formLabelWidth: "120px",
      };
    },
    methods: {
      handleCurrentChange(val) {
        this.listpage.page = val;
        this.getList();
      },
  
      /*每页多少条*/
      handleSizeChange(val) {
        this.listpage.list_rows = val;
        this.getList();
      },
  
      // 卡券二维码
      opendetail() {
        this.dialogVisible = true;
      },
      async postData() {
        const res = await request._post("/shop/video.TemGroup/selTemGroup");
        this.postDataa = res.data.list.data;
      },
  
      //添加
      addmodel() {
        this.add = true;
        this.dialogFormVisible = true;
      },
  
      //添加弹窗
      async ensure_one() {
        var res = request._post("/shop/video.TemUpload/addvideo", {
          tem_name: this.form.tem_name,
          tem_ids: this.form.tem_ids,
          tem_video: this.form.tem_video,
          tem_parame: this.form.tem_parame,
          app_id: this.form.app_id,
          group_id: this.form.group_id,
          type: this.template_type,
        });
        this.dialogFormVisible = false;
        console.log(res);
        this.getList();
      },
      //修改弹窗
      async ensure_tow() {
        request._post("/shop/video.TemUpload/updatevideo", {
          tem_name: this.form.tem_name,
          temid: this.form.temid,
          tem_video: this.form.tem_video,
          tem_parame: this.form.tem_parame,
          app_id: this.form.app_id,
          group_id: this.form.group_id,
        });
        this.changeVisible = false;
      },
      //删除
      async cancel(row) {
        let params = { temid: row.temid };
        const res = await request._post("/shop/video.TemUpload/delvideo", params);
        // console.log(res);
        await this.getList();
      },
      //查询数据
      async getList() {
        const res = await request._post("/shop/video.TemUpload/selvideo", this.listpage);
        this.total = res.data.list.total;
        // console.log("1111111111111", res);
        this.listData = res.data.list.data;
        // console.log(this.listData);
      },
      // 修改
      abandon(row) {
        this.changeVisible = true;
        this.form = row;

        

      },
      /*选择图片之前*/
      onBeforeUploadImage(file) {
        return true;
      },
      /*选择上传图片*/
      fileChange(e) {
        console.log(e, "haha");
      },
      /*上传图片*/
      UploadImage1(param) {
        let self = this;
        const loading = this.$loading({
          lock: true,
          text: "图片上传中,请等待",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        const formData = new FormData();
        formData.append("iFile", param.file);
        formData.append("group_id", self.activeType);
        formData.append("file_type", self.this_config.file_type);
        FileApi.uploadFile(formData).then((res) => {
          // res.data;
          console.log(res);
          this.form.tem_video = res.data.file_path;
          loading.close();
          param.onSuccess();
        });
      },
    },
    mounted() {
      this.getList();
      this.postData();
    },
  };
  </script>
  
  <style>
  .video-avatar {
    width: 400px;
    height: 200px;
  }
  </style>
  